<template>
    <transition name="dropdown-slide">
        <ul :class="classes" v-show="showPopper">
            <slot></slot>
        </ul>
    </transition>
</template>
<script>
    //1.将下拉框组件渲染到body中
    //2.将下拉组件定位到按钮下
    import { prefixCls } from '../prefix'
    import minxin from "@/utils/mixins"

    const stop = e => e.stopPropagation()
    export default {
        name: `${prefixCls}DropdownMenu`,
        componentName: `${prefixCls}DropdownMenu`,
        mixins: [minxin],
        props: {},
        computed: {
            classes() {
                return [
                    'my-dropdown-menu',
                    this.$parent.transferClassName
                ]
            }
        },
        data() {
            return {
                showPopper: false
            };
        },
        mounted() {
            this.init();
            this.initEvent();
        },
        beforeDestroy() {
            this.dropdownEl = this.$el; //下拉框组件
            if (this.dropdownEl && this.dropdownEl.parentNode === document.body) {
                this.dropdownEl.removeEventListener('click', stop);
                document.body.removeChild(this.dropdownEl); //如果在body中删除当前节点
            }
        },
        methods: {
            init() {
                this.buttonEl = this.$parent.$slots.default[0].elm //获取触发节点
                this.dropdownEl = this.$el; //下拉框组件
            },
            initEvent() {
                this.$on("visible", val => {
                    //console.log(`现在为${val ? "显示" : "隐藏"}状态`);
                    this.showPopper = val;
                    val && this.$emit("update", val);
                });
                this.$on("update", val => {
                    val && this.update(this.buttonEl, this.dropdownEl, this.$parent.transfer);
                });
                //实现滑动滚动条时，下拉框能跟随按钮一起滑动定位
                this.bindUpdate(this.buttonEl, () => {
                    this.showPopper && this.update(this.buttonEl, this.dropdownEl, this.$parent.transfer);
                });
            }
        }
    };
</script>

<style>
    .my-dropdown-menu {
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px 0;
        margin: 5px 0;
        background-color: #fff;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        z-index: 2022;
    }

    .dropdown-slide-enter-active:not([position="top"]) {
        animation: selectDropDown .3s;
        transform-origin: center top;
    }
    .dropdown-slide-enter-active[position="top"] {
        -webkit-animation: dropDown2 .3s cubic-bezier(.23,1,.32,1) both; 
        animation: dropDown2 .3s cubic-bezier(.23,1,.32,1) both;      
    }

    .dropdown-slide-leave-active:not([position="top"]) {
        transform-origin: center top;
        animation: dropUp .3s;
    }
    .dropdown-slide-leave-active[position="top"] {
        -webkit-animation: dropUp2 .3s cubic-bezier(.23,1,.32,1) both; 
        animation: dropUp2 .3s cubic-bezier(.23,1,.32,1) both;    
    }

    @keyframes dropDown {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
    }

    @keyframes dropUp {
    0% {
        opacity: 1;
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        transform: scaleY(0);
    }
    }

    @-webkit-keyframes dropDown2 {
        0% {
            -webkit-transform: scaleY(.8) translateZ(0);
            -webkit-transform-origin: 0% 100%;
            opacity: 0;
        }
        100% {
            -webkit-transform: scaleY(1) translateZ(0);
            -webkit-transform-origin: 0% 100%;
            opacity: 1;
        }
    }
    @-webkit-keyframes dropUp2 {
        0% {
            -webkit-transform: scaleY(1) translateZ(0);
            -webkit-transform-origin: 0% 100%;
            opacity: 1;
        }
        100% {
            -webkit-transform: scaleY(.8) translateZ(0);
            -webkit-transform-origin: 0% 100%;
            opacity: 0;
        }
    }
</style>
